<template>
	<view class="flex" style="">
		<view class="column" style="width: calc(100%/2)">
			<view class="w-full" v-for="(item, index) in leftList" :key="index">
				<image class="w-full" :src="item.carousel[0]" mode="widthFix"></image>
			</view>
		</view>
		<view class="column" style="width: calc(100%/2)">
			<view class="w-full" v-for="(item, index) in rightList" :key="index">
				<image class="w-full" :src="item.carousel[0]" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: { type: Array, required: true },
	},
	data() {
		return {
			leftList: [],
			rightList: [],
		}
	},
	watch: {
		list(newValue, oldValue) {
			this.shunt()
		}
	},
	created() {

	},
	methods: {
		shunt() {
			console.log(this.list)
			this.list.forEach((item, index) => {
				if ((index + 1) % 2 === 0) {
					this.rightList.push(item)
				} else {
					this.leftList.push(item)
				}
			})
		}
	}
}
</script>
